<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :scrollTop="scrollTop" backgroundColor="#fff" color="#333"
			:title="pageTitle" :fontWeight="600" :isShowTitle="true">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack('page_sharing/accompany/details')">
				</view>
			</view>
		</tui-navigation-bar>
		<view class="main" v-if="loading">
			<view class="select-skill content-component">
				<view class="title">选择技能</view>
				<view class="skill-list">
					<!-- 收费说明 -->
					<view class="goods-spec" v-for="(item,index) in details.categoryList" :key="item.pengCategoryId"
						@tap.stop.prevent="selectSkill(item,index)">
						<view class="radio" :class="{'radio-active':item.disabled}"></view>
						<view class="content-key" :class="{'goods-label':item.certificateState == 1}">
							{{item.categoryName}}
						</view>
						<view class="content-value">￥{{item.pengActualPrice}}/{{item.serviceType == 1 ? '次':'小时'}}
						</view>
					</view>
				</view>
			</view>
			<view class="content-component">
				<view class="order-list">
					<template v-for="(item,index) in orderList">
						<view class="order-item" v-if="item.serviceType != 1" @click="openForm(item,index)"
							:key="item.name">
							<view class="title">{{item.name}}</view>
							<view class="value-box">
								<image v-if="item.type == 'wexin'" class="pay-icon"
									src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/order/weix.png">
								</image>
								<view v-if="index != 0" class="value onelist-hidden"
									:class="{'value-coupon': index == 5 && coupon.usablelist.length <= 0,'value-coupon-yh': index == 5 && coupon.item}">
									<text v-if="index == 5 && coupon.item">-¥</text> {{item.value}}
								</view>
								<view v-else-if="index == 0" class="value onelist-hidden">
									{{item.value == '请选择' ? '请选择' : item.value.cityName}}
								</view>
								<text v-if="item.arrow" class="arrow dy-iconfont icon-qiehuanqiyou"></text>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="buy-coupon" v-if="this.coupon.usablelist.length <= 0 && details.receiveCouponState == 0 && false">
				<view class="buy-coupon-header">
					<view class="buy-coupon-left">购买惊喜礼包，本单可减<text style="color: #FF4E04;">10</text>元</view>
					<view class="buy-coupon-right" @tap.stop="isBuyCoupon">
						<view class="pirce">￥1</view>
						<mycheckbox :check="coupon.isBuy"></mycheckbox>
					</view>
				</view>
				<view class="buy-coupon-list">
					<image
						src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/10yuan.png">
					</image>
				</view>
			</view>
			<view class="content-component remark-box">
				<view class="remark">
					<input v-model="remarkValue" class="uni-input" placeholder="订单备注（选填）"
						placeholderStyle="font-size: 24rpx;font-weight: 400;color: #B1B3B0;line-height: 44rpx;" />
				</view>
			</view>
			<view class="content-component commitment-box">
				<view class="title">特此承诺</view>
				<view class="commitment">· 敢赔承诺，保驾护航。本着“顾客至上”的理念，趣碰头特此承诺，任何由平台或碰头人问题导致的服务质量问题，均可进行全额退款。</view>
			</view>
			<!-- 底部导航 -->
			<view class="foot">
				<view class="agreement-check">
					<view class="pdCkeckOut" @tap.stop="onAgreement">
						<mycheckbox :check="agreement"></mycheckbox>
					</view>
					<view>
						<text @tap="onAgreement">我已同意</text>
						<text class="agreement"
							@click="checkAgreement('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/pdf/consumer.pdf','平台交易纠纷处理机制')">
							《平台交易纠纷处理机制》 </text>
					</view>
				</view>
				<view class="foot-info">
					<view class="payment-information">
						<view class="total">合计<text class="pirce">￥{{totalPirce > 0 ? (totalPirce - discounts) : '----'}}</text>
						</view>
						<view class="discounts" :class="{'coupon': discounts}">已优惠￥{{discounts ? discounts:'0.00'}}
						</view>
					</view>
					<button class="btn-primary btn-payment" @tap.stop.prevent="onPayment">支付</button>
				</view>
			</view>
		</view>
		<uv-popup :safeAreaInsetBottom="false" ref="pickerPopup" mode="bottom" round="20">
			<view class="resident-pop">
				<view class="header">
					<view class="title">选择服务区域</view>
					<view class="close" @tap="closePicker"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<!-- <uv-picker ref="picker" :roundArray="2" :columns="addressList" keyName="name" @change="change"> -->
				<uv-picker ref="picker" :columns="columns" keyName="cityName"></uv-picker>
				</uv-picker>
				<!-- keyName -->
				<view class="btn-box">
					<view class="look" @tap="closePicker">取消</view>
					<button class="btn-primary btn-submit" @tap.stop.prevent="onSubmitPicker">确认</button>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="datetimePicker" mode="bottom" round="20">
			<uv-datetime-picker :showToolbar="false" :from="'check'" v-model="dayValue" mode="datetime"
				:minDate="1587524800000" :maxDate="1786778555000" @cancel="cancel" :formatter="formatter"
				@confirm="confirm" keyName="value" :userId="userId" @closePicker="closePicker2" :visibleItemCount="3">
			</uv-datetime-picker>
		</uv-popup>
		<uv-popup :safeAreaInsetBottom="false" ref="hourPicker" mode="bottom" round="20">
			<view class="resident-pop">
				<view class="header">
					<view class="title">服务时间</view>
					<view class="close" @tap="closeHourPicker"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<uv-picker ref="pickerhour" :columns="columnsHour" keyName="cityName"></uv-picker>
				</uv-picker>
				<!-- keyName -->
				<view class="btn-box">
					<view class="look" @tap="closeHourPicker">取消</view>
					<button class="btn-primary btn-submit" @tap.stop.prevent="onSubmitPickerHour">确认</button>
				</view>
			</view>
		</uv-popup>
		<uv-popup :safeAreaInsetBottom="false" ref="couponPicker" mode="bottom" round="20">
			<view class="coupon-picker">
				<view class="header">
					<view class="title">优惠券</view>
					<view class="close" @tap="closeCoupon"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<scroll-view class="usable-list" v-if="coupon.usablelist.length > 0" scroll-y="true">
					<view class="item" v-for="(item,index) in coupon.usablelist" :key="item.userCouponId">
						<view class="usable-item" @tap.stop.prevent="pickerCoupon(item,index)">
							<view class="money"><text
									style="font-size: 32rpx; margin-right: 8rpx;">¥</text><text>{{parseInt(item.actualAmount)}}</text>
							</view>
							<view class="info">
								<view class="coupon-name">{{item.couponName}}</view>
								<view class="coupon-data">长期有效</view>
							</view>
							<view class="mycheckbox">
								<view class="noCheck" v-if="!item.check"></view>
								<image v-else class="checkImg"
									src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/share/check.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="btn-box">
					<view class="look" @tap="closeCoupon">取消</view>
					<button class="btn-primary btn-submit" @tap.stop.prevent="onSubmitCoupon">确认</button>
				</view>
			</view>
		</uv-popup>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import {
		timeFormat
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import dayjs from "dayjs";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '订单支付', //标题
				agreement: false,
				loading: false,
				userId: null,
				remarkValue: '',
				details: null,
				killDetails: null,
				choose_hours: [],
				categoryIndex: 0,
				totalPirce: -1,
				dateTime: dayjs().format('YYYY-MM-DD HH:mm'),
				timetable: [],
				dayValue: Number(new Date()) + 1000 * 60 * 180,
				minDate: Number(new Date()),
				columns: [
					[]
				],
				columnsHour: [
					[]
				],
				orderList: [{
						name: '服务区域',
						required: true,
						arrow: true,
						value: '请选择',
						serviceType: 0,
					},
					{
						name: '服务地址',
						required: true,
						arrow: true,
						value: '请选择',
						serviceType: 0,
					}, {
						name: '服务时间',
						required: true,
						arrow: true,
						value: '请选择',
						serviceType: 0,
					}, {
						name: '服务时长',
						required: true,
						arrow: true,
						value: '请选择',
						serviceType: 0,
					}, {
						name: '支付方式',
						required: false,
						arrow: false,
						value: '微信支付',
						serviceType: 0,
						type: 'wexin',
					},
					{
						name: '优惠券',
						required: false,
						arrow: true,
						value: '请选择'
					}
				],
				latitude: "",
				longitude: "",
				codeTimer: null, //定时器
				codeTime: 14, // 限制1分钟后没请求到erp数据，不再继续请求
				timetable: [],
				coupon: {
					usablelist: [],
					disabledlist: [],
					item: null,
					isBuy: false
				},
				discounts: 0
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			this.userId = options.id
			this.getPageData()
		},
		onShow: function() {},
		onHide() {
			uni.removeStorageSync('details');
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			change(e) {
				const {
					columnIndex,
					index
				} = e
				if (columnIndex === 0) {
					this.$refs.picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.getOrderDetails()]).then(() => {
					this.loading = true
					callback && callback()
				}).catch(() => {
					callback && callback()
				});
			},

			closePicker() {
				this.$refs.pickerPopup.close();
			},
			closeHourPicker() {
				this.$refs.hourPicker.close();
			},
			onSubmitPicker() {
				let resident = this.$refs.picker.confirm();
				this.$set(this.orderList[0], "value", resident.value[0])
				this.closePicker()
			},
			onSubmitPickerHour() {
				let resident = this.$refs.pickerhour.confirm();
				var hour = this.orderList[3].value.split('小时')[0] || 1;
				this.totalPirce = this.details.categoryList[this.categoryIndex].pengActualPrice * resident.value[0]
				this.$set(this.orderList[3], "value", resident.value[0] + '小时')
				this.closeHourPicker()
			},
			checkAgreement(url, name) {
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				wx.downloadFile({
					url: url, //文件地址
					success(res) {
						wx.saveFile({ //重点 wx.saveFile一定要有   避免文件存储找不到  然后打开失败
							tempFilePath: res.tempFilePath,
							filePath: wx.env.USER_DATA_PATH + '/' + name + '.pdf',
							success(res) {
								wx.openDocument({
									filePath: res.savedFilePath,
									fileType: "pdf",
									showMenu: true,
									success: function(res) {
										that.$refs.toast.hide()
									},
									fail: function(res) {
										that.$refs.toast.hide()
									},
								})
							}
						})
					},
				})
			},
			onAgreement(detail, name) {
				this.agreement = !this.agreement
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			formatNum: function(num) {
				num = num.replace("月", "-")
				num = num.replace("日", "")
				return num;
			},
			selectSkill(kill, li) {
				if (!kill.disabled) {
					this.categoryIndex = li

					let pengLongestTime = Math.floor(this.details.categoryList[li].pengLongestTime * 100) /
						100
					let pengLeastTime = Math.floor(this.details.categoryList[li].pengLeastTime * 100) / 100
					let columnsHour = [
						[]
					]

					for (let i = pengLeastTime; i <= pengLongestTime; i++) {
						if (i > 0) {
							columnsHour[0].push(i)
						}
					}
					this.columnsHour = columnsHour

					var hour = this.details.categoryList[this.categoryIndex].serviceType == 1 ? 1 : this.orderList[3].value
						.split('小时')[0];
					this.totalPirce = this.details.categoryList[this.categoryIndex].pengActualPrice * hour
					this.$set(this.orderList[3], "serviceType", this.details.categoryList[li].serviceType)
					this.details.categoryList.forEach((item, index) => {
						this.$set(this.details.categoryList[index], 'disabled', index == li)
					})
					this.killDetails = kill
				}
			},
			openForm(item, index) {
				if (index == 1) {
					wx.chooseLocation({
						success: (res) => {
							this.$set(this.orderList[1], "value", res.address + " " + res.name)
							this.latitude = res.latitude;
							this.longitude = res.longitude;
						},
						fail: () => {},
						complete: function() {}
					})
				} else if (index == 0) {
					this.$refs.pickerPopup.open();
					return
				} else if (index == 2) {
					this.$refs.datetimePicker.open();
					return
				} else if (index == 3) {
					this.$refs.hourPicker.open();
				} else if (index == 5 && this.coupon.usablelist.length > 0) {
					this.$refs.couponPicker.open();
				}
			},
			pickerCoupon(item, index) {
				this.coupon.usablelist.forEach((m, x) => {
					if (x == index) {
						m.check = !m.check
					} else {
						m.check = false
					}
				})
				// this.coupon.usablelist[index].check = !this.coupon.usablelist[index].check
			},
			closeCoupon() {
				this.$refs.couponPicker.close();
			},
			onSubmitCoupon() {
				this.coupon.item = null
				this.discounts = 0
				this.coupon.usablelist.forEach(item => {
					if (item.check) {
						this.coupon.item = item
						this.discounts = parseInt(this.coupon.item.actualAmount)
					}
				})
				if (this.coupon.item) {
					this.orderList[5].value = parseInt(this.coupon.item.actualAmount)
				} else {
					this.orderList[5].value = this.coupon.usablelist.length > 0 ? '请选择' : '暂无可用'
				}
				this.closeCoupon()
			},
			isBuyCoupon() {
				this.coupon.isBuy = !this.coupon.isBuy
				this.discounts = this.coupon.isBuy ? 10 : 0
			},
			cancel() {
				this.$refs.datetimePicker.close();
			},
			closePicker2() {
				this.$refs.datetimePicker.close();
			},

			confirm(e) {
				let that = this
				let data = e.dataColumns[0] + '-' + e.dataColumns[1] + '-' + e.dataColumns[2].text + ' ' + e.dataColumns[
					3] + ':' + e.dataColumns[4]
				if (!e.dataColumns[2].status || Number(new Date(data)) + 50000 < this.dayValue) {
					that.$refs.toast.show({
						type: 'default',
						message: "当前时间段不可下单"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				this.$refs.datetimePicker.close();
				this.$set(this.orderList[2], "value", dayjs(e.value).format('YYYY-MM-DD HH:mm'))
			},
			formatterFormatNum: function(num) {
				return num < 10 ? '0' + num : num + '';
			},
			formatter(type, value, timetable) {
				let that = this
				if (type === 'day') {
					var status = null
					if (timetable) {
						let num = value < 10 ? '0' + value : value + ''
						status = !timetable.includes(num)
					}
					return {
						text: value,
						status: status,
					}
				}
				return value
			},
			//获取用户详情
			getOrderDetails() {
				return new Promise((resolve, reject) => {
					app._get(
						"/client/order/query/category", {
							userId: this.userId
						},
						(result) => {
							let details = result.data
							details.categoryList.forEach((item, index) => {
								this.$set(item, 'disabled', index == 0)
							})
							this.killDetails = details.categoryList[0]
							this.$set(this.orderList[3], "serviceType", details.categoryList[0].serviceType)
							this.totalPirce = details.categoryList[0].serviceType == 1 ? details.categoryList[
								0].pengActualPrice * 1 : 0
							details.addressList.forEach((item, index) => {
								this.$set(item, 'detail', '')
								this.columns[0].push({
									cityName: item.cityName + item.name,
									addressId: item.addressId
								})
							})
							details.useableCouponList = details.useableCouponList ? details.useableCouponList : [],
							details.useableCouponList.forEach(item => {
								if (item.couponStatus == 1) {
									item.check = false
									this.coupon.usablelist.push(item)
									// this.coupon.usablelist = this.coupon.usablelist.concat(this.coupon.usablelist).concat(this.coupon.usablelist).concat(this.coupon.usablelist).concat(this.coupon.usablelist).concat(this.coupon.usablelist).concat(this.coupon.usablelist).concat(this.coupon.usablelist).concat(this.coupon.usablelist).concat(this.coupon.usablelist)
								} else if (item.couponStatus == 4) {
									this.coupon.disabledlist.push(item)
								}
							})
							this.orderList[5].value = this.coupon.usablelist.length > 0 ? '请选择' : '暂无可用'
							let pengLongestTime = Math.floor(details.categoryList[0].pengLongestTime * 100) /
								100
							let pengLeastTime = Math.floor(details.categoryList[0].pengLeastTime * 100) / 100
							let columnsHour = [
								[]
							]

							for (let i = pengLeastTime; i <= pengLongestTime; i++) {
								if (i > 0) {
									columnsHour[0].push(i)
								}
							}
							this.columnsHour = columnsHour
							this.details = details
						}, null, () => {
							resolve();
						}
					);
				});
			},
			payState(id) {
				let that = this
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/order/query/pay-state", id,
						(result) => {
							console.log('支付结果', result);
							if (result.data.payState != 0) {
								that._clearCount()
								that.$refs.toast.hide()
								app.navigationTo('page_sharing/order/details?id=' + id +
									'&status=place&isT=2')
							}
							resolve(result);
						}, () => {
							that.$refs.toast.hide()
							that._clearCount()
						}
					);
				});
			},
			_codeCount(id) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				that.codeTimer = setInterval(() => {
					if (that.codeTime <= 0) {
						clearInterval(that.codeTimer);
						that.codeTimer = null;
						that.codeTime = 0;
						that.$refs.toast.hide()
						/* 清除定时的逻辑*/
					} else {
						/*未请求到接口，继续请求数据*/
						that.payState(id)
						that.codeTime--;
					}
				}, 2000);
			},
			//清除定时器
			_clearCount() {
				clearInterval(this.codeTimer);
				this.codeTimer = null;
				this.codeTime = 0;
			},
			saveReserve(params) {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/order/submit", params,
						(result) => {
							resolve(result);
						}, null, () => {
							this.loading = true
							resolve();
						}
					);
				});
			},
			payment(params) {
				let that = this
				let provider = uni.getProvider({
					service: 'payment'
				})
				that.saveReserve(params).then(res => {
					let data = res.data
					// res为调起微信支付所需参数
					// 调起微信支付
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						appId: data.appId,
						timeStamp: data.timeStamp, // 时间戳
						nonceStr: data.nonceStr, // 随机字符串
						package: data.prepayId,
						signType: data.signType, // 签名算法
						paySign: data.paySign, // 签名
						success: function(res) {
							console.log('支付成功', res);
							// 业务逻辑。。。
							that._codeCount(data.orderId)
						},
						fail: function(err) {
							that.$refs.toast.hide()
							console.log('支付失败', err);
						}
					});
				}).catch(err => {
					console.log(err);
				})
			},
			onPayment() {
				let that = this
				if (that.orderList[0].value == '请选择') {
					that.$refs.toast.show({
						type: 'default',
						message: "请选择服务区域"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (that.orderList[1].value == '请选择') {
					that.$refs.toast.show({
						type: 'default',
						message: "请选择服务地址"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (that.orderList[2].value == '请选择') {
					that.$refs.toast.show({
						type: 'default',
						message: "请填写服务时间"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (that.orderList[3].value == '请选择' && that.killDetails.serviceType != 1) {
					that.$refs.toast.show({
						type: 'default',
						message: "请填写服务时长"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.agreement) {
					that.$refs.toast.show({
						type: 'default',
						message: "请同意平台交易纠纷处理机制"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				that.$refs.toast.show({
					type: 'loading',
				})
				var date = new Date(that.orderList[2].value).getTime();
				var hour = that.orderList[3].value.split('小时')[0] || 1;
				var pengStartTime = timeFormat(date, 'yyyy-mm-dd hh:MM:ss')
				var pengEndTime = timeFormat(date + 1000 * 60 * 60 * parseInt(hour), 'yyyy-mm-dd hh:MM:ss')

				let params = {
					"address": that.orderList[1].value,
					"countyId": that.orderList[0].value.addressId,
					"pengCategoryId": that.killDetails.pengCategoryId,
					"pengStartTime": pengStartTime,
					"receiveUserId": that.userId,
					"userRemark": that.remarkValue,
					"pengLatitude": that.latitude,
					"pengLongitude": that.longitude,
				}
				if (that.killDetails.serviceType == 0) {
					params.pengEndTime = pengEndTime
				}
				if (that.coupon.isBuy) {
					params.buyCouponState = 1
					params.couponId = this.details.couponId
				}
				if (that.coupon.item) {
					params.userCouponId = that.coupon.item.userCouponId
				}
				that.payment(params)
				return
				throttle(
					wx.requestSubscribeMessage({
						tmplIds: ['m6k8NIF9qd4-nIkl3ks5PlPOMvijInpBi0XzPmNbJvs',
							'inhNL1YwOXhW1aayoGNTE7U0bsHm7mj04dfK8e7OGhQ',
							'8fsA0Z1x6HQJqfrVFu53YoxjCKq5f-GCrPp2KIH_-NE'
						],
						success(res) {
							that.$refs.toast.hide()
							that.payment(params)
						},
						fail(err) {
							that.$refs.toast.hide()
							console.log(err);
							that.$refs.toast.show({
								type: 'default',
								message: err.errMsg
							})
							setTimeout(() => {
								that.$refs.toast.hide()
							}, 1000)
						}
					}), 1000, true)
			},
			// 返回上一页
			goBack: function(url) {
				if (url) {
					app.navigationTo(url + '?id=' + this.userId)
				} else {
					app.beNavigateBack();
				}
				uni.removeStorageSync('details');
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/basic-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 640rpx;

		.pdCkeckOut {
			padding: 15rpx;
			padding-right: 10rpx;
		}

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 176rpx 24rpx;
			padding-bottom: calc(215rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(215rpx + env(safe-area-inset-bottom));

			.content-component {
				box-sizing: border-box;
				padding: 32rpx 24rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
			}

			.select-skill {
				margin-bottom: 16rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #222222;
					line-height: 44rpx;
					margin-bottom: 30rpx;
				}

				.skill-list {

					.goods-spec {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 36rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.radio {
							width: 24rpx;
							height: 24rpx;
							background: #FFFFFF;
							border: 2rpx solid #464941;
							border-radius: 50%;
							margin-right: 16rpx;

							&.radio-active {
								position: relative;

								&::after {
									content: "";
									display: inline-block;
									width: 14rpx;
									height: 14rpx;
									background: #0E0E0D;
									border-radius: 50%;
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
								}
							}
						}

						.content-key {
							font-size: 28rpx;
							font-weight: 400;
							color: #282D2D;
							line-height: 44rpx;
							flex: 1;

							&.goods-label {
								display: flex;
								align-items: center;

								&::after {
									content: "";
									display: inline-block;
									box-sizing: border-box;
									width: 103rpx;
									height: 36rpx;
									background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/major-2.png');
									background-size: 100% 100%;
									margin-left: 17rpx;
								}
							}
						}

						.content-value {
							flex-shrink: 0;
							font-size: 28rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 44rpx;
						}
					}
				}
			}

			.order-list {
				.order-item {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					margin-bottom: 37rpx;
					width: 100%;

					&:last-child {
						margin-bottom: 0;
					}

					.title {
						font-size: 28rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 44rpx;
						flex-shrink: 0;
						margin-right: 20rpx;
					}

					.value-box {
						width: 80%;
						font-size: 28rpx;
						font-weight: 500;
						color: #222222;
						line-height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.value-coupon {
							font-weight: 400;
							font-size: 28rpx;
							color: #999B9B;
							line-height: 44rpx;
						}

						.value-coupon-yh {
							color: #FF4664;
						}

						.arrow {
							font-size: 24rpx;
							line-height: 24rpx;
							color: #666666;
							margin-left: 14rpx;
						}

						.pay-icon {
							width: 44rpx;
							height: 44rpx;
							margin-right: 8rpx;
						}

						.deta-value {
							display: flex;
							align-items: center;

							.hour,
							.deta {
								font-size: 28rpx;
								font-weight: 500;
								color: #222222;
								line-height: 44rpx;
								box-sizing: border-box;
								padding: 2rpx 12rpx;
								background: #F6F8F7;
								border-radius: 8rpx;
							}

							.deta {
								margin-right: 8rpx;
							}

							.choose {
								color: #6D9E15;
							}

							.choose_hour_status {
								background: rgba(255, 70, 100, 0.1);
								color: #FF4664;
							}
						}
					}
				}

				.choose-data {
					opacity: 0;
					-webkit-transition: all 0.2s linear;
					transition: all 0.2s linear;

					&.choose-data-show {
						opacity: 1;
					}
				}
			}

			.buy-coupon {
				box-sizing: border-box;
				padding: 32rpx 24rpx;
				height: 283rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/buy-coupon-bg.png');
				background-size: 710rpx 202rpx;
				background-repeat: no-repeat;
				margin-top: 16rpx;

				.buy-coupon-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.buy-coupon-left {
						font-weight: 900;
						font-size: 32rpx;
						color: #1E1F1F;
						line-height: 44rpx;
					}

					.buy-coupon-right {
						display: flex;
						align-items: center;

						.pirce {
							font-weight: 900;
							font-size: 32rpx;
							color: #1E1F1F;
							line-height: 37rpx;
							margin-right: 16rpx;
						}
					}
				}

				.buy-coupon-list {
					width: 158rpx;
					height: 151rpx;
					margin-top: 16rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.remark-box {
				margin-top: 16rpx;

				.uni-input {
					padding: 17rpx 28rpx;
					background: #F7F9F5;
					border-radius: 12rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 44rpx;
				}
			}

			.commitment-box {
				margin-top: 16rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #222222;
					line-height: 44rpx;
				}

				.commitment {
					font-size: 28rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 44rpx;
					margin-top: 24rpx;
				}
			}

			.foot {
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 0;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				box-shadow: 0px 0 19rpx 0px rgba(198, 204, 202, 0.56);
				background: #FFFFFF;

				.agreement-check {
					font-size: 22rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 44rpx;
					margin-bottom: 2rpx;
					box-sizing: border-box;
					padding-left: 22rpx;
					display: flex;
					align-items: center;

					.agreement {
						color: #396DE8;
						margin: 0 6rpx;
					}
				}
			}

			.foot-info {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				background: #FFFFFF;
				box-sizing: content-box !important;

				.payment-information {
					margin-left: 42rpx;

					.total {
						font-size: 30rpx;
						font-weight: 900;
						color: #222222;
						line-height: 44rpx;

						.pirce {
							color: #EF5668;
						}
					}

					.discounts {
						font-size: 22rpx;
						font-weight: 400;
						color: #BDB8B8;
						line-height: 30rpx;

						&.coupon {
							color: #FF4664;
						}
					}
				}

				.btn-payment {
					flex-shrink: 0;
					width: 180rpx;
					margin-right: 36rpx;
				}
			}
		}

		.set-popup {
			width: 100vw;
			min-height: 100vh;
			background: #F6F8F7;
			background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/basic-bg.png");
			background-repeat: no-repeat;
			background-size: 100% 640rpx;
			box-sizing: border-box;
			padding: 192rpx 24rpx 0;
			position: relative;

			.set-content {
				.address {
					padding: 36rpx 24rpx 62rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 20rpx;

					.coverage {
						display: flex;

						.title {
							font-size: 28rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 37rpx;
							margin-right: 32rpx;
							flex-shrink: 0;
							box-sizing: border-box;
							padding-top: 16rpx;
						}

						.city-list {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							flex: 1;

							.city-item {
								box-sizing: border-box;
								padding: 17rpx 0;
								background: #FFFFFF;
								border-radius: 20rpx;
								border: 4rpx solid #E3E9E5;
								margin-bottom: 24rpx;
								width: calc((100% - 32rpx)/2);
								white-space: nowrap;
								text-align: center;
								margin-right: 10rpx;
								font-size: 28rpx;
								font-weight: 900;
								color: #282D2D;
								line-height: 37rpx;

								&.active {
									border: 2rpx solid #282D2D;
									position: relative;

									&::before {
										content: "";
										display: block;
										width: 36rpx;
										height: 28rpx;
										background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/city-active.png');
										background-size: 100%;
										position: absolute;
										right: 0;
										bottom: 0;
									}
								}
							}
						}
					}

					.details-address {
						.title {
							font-size: 28rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 37rpx;
							margin-bottom: 16rpx;
						}

						.details-address-textarea {
							box-sizing: border-box;
							padding: 28rpx 24rpx;
						}
					}
				}

				.btn-submit {
					position: absolute;
					bottom: 64rpx;
					left: 50%;
					transform: translateX(-50%);
					width: calc(100% - 77rpx + 24rpx);

				}
			}
		}

		.resident-pop {
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 43rpx 31rpx 66rpx;
			position: relative;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 33rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.delete-hint {
				font-size: 32rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 45rpx;
				margin: 27rpx 0 49rpx 0;
				text-align: center;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.look {
					width: calc((100% - 24rpx)/2);
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #7B867F;
					font-size: 32rpx;
					font-weight: 900;
					color: #999B9B;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}

				.btn-submit {
					width: calc((100% - 24rpx)/2);
					// height: 102rpx;
					// line-height: 102rpx;
				}
			}
		}

		.coupon-picker {
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 43rpx 31rpx 66rpx;
			position: relative;
			height: 70vh;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 33rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.usable-list {
				margin-bottom: 24rpx;
				height: calc(70vh - 43rpx - 66rpx - 33rpx - 45rpx - 84rpx);
				width: 100%;

				.item {
					width: calc(100% - 16rpx);
					margin: 0 auto;
					padding-top: 16rpx;
					padding-bottom: 16rpx;
					box-sizing: border-box;
				}

				.usable-item {
					box-sizing: border-box;
					padding: 31rpx 36rpx 31rpx 44rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 19rpx 0rpx rgba(198, 204, 202, 0.2);
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					// margin-bottom: 16rpx;
					// margin-top: 16rpx;

					.money {
						font-weight: 900;
						font-size: 48rpx;
						color: #FF4E04;
					}

					.info {
						flex: 1;
						margin-left: 49rpx;

						.coupon-name {
							font-weight: 900;
							font-size: 32rpx;
							color: #0E0E0D;
							line-height: 45rpx;
							margin-bottom: 12rpx;
						}

						.coupon-data {
							font-weight: 400;
							font-size: 26rpx;
							color: #0E0E0D;
							line-height: 37rpx;
						}

						.coupon-rule {
							font-weight: 400;
							font-size: 22rpx;
							color: #999B9B;
							line-height: 30rpx;
							vertical-align: middle;

							&::after {
								font-family: "dy-iconfont";
								content: "\e600";
								font-size: 20rpx;
								vertical-align: middle;
								position: relative;
								top: -2rpx;
							}
						}
					}

					.mycheckbox {
						position: relative;
						box-sizing: border-box;
						font-size: 0;
						width: 26rpx;
						height: 26rpx;
						overflow: hidden;
						border: 1px solid #464941;
						border-radius: 50%;

						.noCheck {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							box-sizing: border-box;
							border-radius: 50%;
							font-size: 0;
						}



						.checkImg {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							font-size: 0;
							transform: scale(1.4);
						}
					}

					.coupon-state {
						width: 144rpx;
						height: 58rpx;
						background: #FF4E04;
						border-radius: 20rpx;
						font-weight: 600;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 58rpx;
						text-align: center;
					}
				}
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.look {
					width: calc((100% - 24rpx)/2);
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #7B867F;
					font-size: 32rpx;
					font-weight: 900;
					color: #999B9B;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}

				.btn-submit {
					width: calc((100% - 24rpx)/2);
				}
			}
		}
	}
</style>